<template>
  <div class="handle_box">
    <draggable
      group="people"
      @start="drag = true"
      @end="drag = false"
      v-model="myList"
    >
      <div v-for="(item, index) in list" :key="item.id" class="flow_item">
        <div class="item">
          <div
            class="icon_open"
            v-if="!item.showItem"
            @click="handOpenItem(item)"
          >
            <span class="el-icon-plus" style="color: #2680d2"></span>
          </div>
          <div class="icon_open" v-else @click="handOpenItem(item)">
            <span class="el-icon-minus" style="color: #2680d2"></span>
          </div>
          <div class="flow_sele_box">
            <div class="title my_required">类型</div>
            <el-select
              class="flow_sele"
              v-model="item.type"
              size="small"
              @change="
                (val) => {
                  changeType(val, item);
                }
              "
            >
              <el-option
                v-for="item2 in typeList"
                :key="item2.id"
                :label="item2.name"
                :value="item2.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="flow_sele_box" style="margin-left: 10px; width: 272px">
            <div class="title my_required">{{ item.title }}</div>
            <!-- 筛选value是个字符串,其他情况下是个对象 -->
            <PopoverInput
              :title="item.title"
              v-if="item.title == '筛选'"
              :value="item.value"
              @input="
                (even) => {
                  inputChange(even, item);
                }
              "
              @changeRadio="
                (row) => {
                  changeRadio(row, item, index);
                }
              "
              :objKey="'funArr'"
              :keys="'filterFun22' + index"
            ></PopoverInput>

            <el-input
              v-else
              @click.native="handInput(item)"
              suffix-icon="el-icon-edit-outline"
              v-model="item.value.parameters.functionName"
              size="small"
            ></el-input>
          </div>
          <svg-icon class="draganddrop" icon-class="draganddrop"></svg-icon>
          <svg-icon
            class="trash"
            icon-class="trash"
            @click="handDel(item, index)"
          ></svg-icon>
        </div>
        <el-collapse-transition v-if="item.title !== '筛选'">
          <FlowHandleItem
            @handItemAdd="(row) => handItemAdd(row, item, index)"
            @handItemDel="handItemDel"
            v-show="item.showItem"
            :isAdd="item.isAdd"
            :parameters="item.value.parameters.parameters"
          ></FlowHandleItem>
        </el-collapse-transition>
      </div>
    </draggable>
    <FlowBtns @handAdd="handAdd"></FlowBtns>
    <FunctionDrawer
      :title="rowItem.title"
      @handClose="handClose"
      @submit="submit"
      ref="functionDrawerRef"
      :objKey="objKey"
    ></FunctionDrawer>
  </div>
</template>

<script>
import FlowHandleItem from "./FlowHandleItem";
import draggable from "vuedraggable";
import FlowBtns from "./FlowBtns";
import FunctionDrawer from "@/components/FunctionDrawer";
import PopoverInput from "@/components/PopoverInput";
// import { typeList } from "@/utils/local";
// 牵扯到动态操作列表,必须要加一个id 防止出现bug
import { mapGetters } from "vuex";
export default {
  components: {
    FunctionDrawer,
    FlowHandleItem,
    draggable,
    FlowBtns,
    PopoverInput,
  },
  computed: {
    ...mapGetters(["extensions"]),
    lists() {},
    // 解决拖拽告警-子组件不可直接修改父组件数据
    myList: {
      get() {
        return this.list;
      },
      set(value) {
        this.$emit("updateList", value);
      },
    },
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    typeList: {
      type: Array,
      default: () => [],
    },
    objKey: {
      type: String,
      default: "",
    },
    valueType: {
      type: String,
      default: "valueType",
    },
  },

  data() {
    return {
      rowItem: {},
      // typeList: typeList,
      form: {},
      row: {},
      rowIndex: 0,
    };
  },

  methods: {
    changeRadio(row, item, index) {
      this.$emit("changeRadio", row, item, index);
      // item.value = row.valueType;
    },
    inputChange($event, item) {
      console.log(item, "sss");
      this.rowItem = item;
      this.$emit("changeRadio", { valueType: $event }, item);
    },
    changeType(index, row) {
      this.$emit("changeType", index, row);
    },
    // 手动控制pop显示隐藏-如果内容为空就隐藏 (解决bug-多次点击隐藏之后,在输入内容不会显示)
    // inputShowPop(row, index) {
    //   this.$nextTick(() => {
    //     // console.log(this.$refs["popover"],index)
    //     // if (this.items && !this.items.every((item) => item.list.length === 0)) {
    //     //   this.$refs["popover"][index]
    //     //     ? this.$refs["popover"][index].doShow()
    //     //     : this.$refs["popover"][0].doShow();
    //     // } else {
    //     //   this.$refs["popover"][index] &&
    //     //     this.$refs["popover"][index].doClose();
    //     // }
    //   });
    // },

    changeInputValue(row, index) {
      this.row = row;
      this.rowIndex = index;
    },
    // 删除
    handItemDel(index, eIndex, row) {
      this.$emit("handItemDel", row, eIndex);
    },
    // 动态添加函数
    handItemAdd(row, item, index) {
      this.$emit("handItemAdd", row, item, index);
    },
    //函数-窗口..
    handAdd(row) {
      this.$emit("handAdd", row);
    },
    handClose(row) {
      this.$refs.functionDrawerRef.show = false;
      this.$emit("handClose", row);
    },
    //函数弹框确认
    submit(row) {
      this.$emit("submit", row);
    },
    handInput(item) {
      this.rowItem = item;
      this.$refs.functionDrawerRef.show = true;
      // 打开抽屉-清空抽屉的表单
      this.$refs.functionDrawerRef.resetForm();
      this.$emit("handInput", item);
    },
    handOpenItem(item) {
      this.$emit("handOpenItem", item);
    },
    handDel(item, index) {
      this.$emit("handDel", item, index);
    },
  },
};
</script>

<style lang='scss' scoped>
.handle_box {
  /* background-color: #e9e9e9; */
  /* margin-top: 20px; */

  .flow_item {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    &:last-child {
      border-bottom: 0;
    }
    .item {
      display: flex;
      align-items: center;
    }
    .flow_sele_box {
      display: flex;
      /* width: 144px; */
      margin-left: 10px;
      .title {
        /* width: 59px; */
        width: 98px;
        font-size: 13px;
        /* height: 28px; */
        background: rgba(0, 0, 0, 0.04);
        border: 1px solid #e4e4e4;
        border-right: 0;
        text-align: center;
        line-height: 28px;
        /* border-radius: 2px 0px 0px 0; */
      }
      /deep/ .el-input--small .el-input__inner {
        /* padding-left: 0 !important; */
        border: 1px solid #e4e4e4;
        border-left: 0;
        border-radius: 0;
      }
      .flow_sele {
        /* width: 70px; */
        width: 50%;
      }
      /* display: flex; */
    }
  }
  .icon_open {
    min-width: 16px;
    min-height: 16px;
    max-width: 16px;
    max-height: 16px;
    border: 1px solid #2680d2;
    background: rgba(38, 128, 210, 0.15);
    /* text-align: center; */
    /* line-height: 14px; */
    cursor: pointer;
    position: relative;
    span {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 12px;
      padding: 0;
    }
  }
}
</style>